<template>
  <div class="order-management">
    <!-- 订单搜索表单 -->
    <el-form :model="form" ref="form" label-width="80px" class="order-search-form">
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单搜索:">
            <el-select v-model="form.orderSearch" placeholder="请选择">
              <el-option label="订单号" value="orderNumber"></el-option>
              <el-option label="商品名称" value="productName"></el-option>
              <el-option label="买家昵称" value="buyerNickName"></el-option>
            </el-select>
            <el-input v-model="form.orderInput" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="下单时间:">
            <el-date-picker
              v-model="form.orderDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="售后方式:">
            <el-select v-model="form.afterSaleMethod" placeholder="请选择">
              <el-option label="仅退款" value="refundOnly"></el-option>
              <el-option label="退货退款" value="returnAndRefund"></el-option>
              <el-option label="换货" value="exchange"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="售后状态">
            <el-select v-model="form.afterSaleStatus" placeholder="请选择">
              <el-option label="待处理" value="pending"></el-option>
              <el-option label="处理中" value="processing"></el-option>
              <el-option label="已完成" value="completed"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="发货状态">
            <el-select v-model="form.deliveryStatus" placeholder="请选择">
              <el-option label="未发货" value="notShipped"></el-option>
              <el-option label="已发货" value="shipped"></el-option>
              <el-option label="部分发货" value="partiallyShipped"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleSearch">筛选</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 订单表格 -->
    <el-tabs v-model="activeName" @tab-click="handleTabClick" class="order-table-tabs">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="待商家处理" name="pendingMerchant"></el-tab-pane>
      <el-tab-pane label="待买家处理" name="pendingBuyer"></el-tab-pane>
      <el-tab-pane label="客服介入中" name="customerService"></el-tab-pane>
    </el-tabs>

    <el-table :data="filteredTableData" style="width: 100%" class="order-table">
      <el-table-column prop="afterSaleNumber" label="售后编号"></el-table-column>
      <el-table-column prop="orderNumber" label="订单号"></el-table-column>
      <el-table-column prop="product" label="商品"></el-table-column>
      <el-table-column prop="deliveryStatus" label="发货状态"></el-table-column>
      <el-table-column prop="afterSaleMethod" label="售后方式"></el-table-column>
      <el-table-column prop="orderAmount" label="订单金额"></el-table-column>
      <el-table-column prop="refundAmount" label="退款金额"></el-table-column>
      <el-table-column prop="applyTime" label="申请时间"></el-table-column>
      <el-table-column prop="timeout" label="超时时"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        orderSearch: '',
        orderInput: '',
        orderDate: '',
        afterSaleMethod: '',
        afterSaleStatus: '',
        deliveryStatus: ''
      },
      activeName: 'all',
      tableData: [
        {
          afterSaleNumber: '374938',
          orderNumber: '3824**',
          product: 'Solis索利斯真空吸尘器',
          deliveryStatus: '未发货',
          afterSaleMethod: '仅退款',
          orderAmount: 99,
          refundAmount: 99,
          applyTime: '2022-09-19 9:39:39',
          timeout: '2022-'
        },
        // 更多数据...
      ]
    };
  },
  computed: {
    filteredTableData() {
      // 根据当前选中的标签过滤表格数据
      if (this.activeName === 'all') {
        return this.tableData;
      } else {
        return this.tableData.filter(item => {
          switch (this.activeName) {
            case 'pendingMerchant':
              return item.afterSaleStatus === '待商家处理';
            case 'pendingBuyer':
              return item.afterSaleStatus === '待买家处理';
            case 'customerService':
              return item.afterSaleStatus === '客服介入中';
            default:
              return true;
          }
        });
      }
    }
  },
  methods: {
    handleSearch() {
      // 处理筛选逻辑
      console.log('筛选条件:', this.form);
      // 可以在这里添加更多的筛选逻辑，例如根据表单输入过滤 `tableData`
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
    handleEdit(index, row) {
      console.log('编辑行:', index, row);
      // 处理编辑逻辑
    }
  }
};
</script>

<style scoped>
/* 添加样式 */
.order-management {
  padding: 20px;
}

.order-search-form {
  margin-bottom: 20px;
}

.order-table-tabs {
  margin-bottom: 20px;
}

.order-table {
  border-top: 1px solid #dfe6ec;
}
</style>